<template>
  <div class="alumni-detail" :class="{ 'has-audit': isAudit }">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="back" @click="$router.back()">
        <i class="el-icon-arrow-left"></i>
      </div>
      <span>校友详情</span>
    </div>

    <!-- 详情内容 -->
    <div class="content">
      <!-- 基本信息 -->
      <div class="section">
        <div class="section-title">基本信息</div>
        <div class="info-list">
          <div class="info-item">
            <span class="label">姓名</span>
            <span class="value">{{ details.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">性别</span>
            <span class="value">{{ details.gender }}</span>
          </div>
          <div class="info-item">
            <span class="label">入学年份</span>
            <span class="value">{{ details.admissionYear }}</span>
          </div>
          <div class="info-item">
            <span class="label">毕业年份</span>
            <span class="value">{{ details.graduationYear }}</span>
          </div>
          <div class="info-item">
            <span class="label">学院</span>
            <span class="value">{{ details.college }}</span>
          </div>
          <div class="info-item">
            <span class="label">专业</span>
            <span class="value">{{ details.major }}</span>
          </div>
          <div class="info-item">
            <span class="label">班级</span>
            <span class="value">{{ details.classNo }}</span>
          </div>
        </div>
      </div>

      <!-- 联系方式 -->
      <div class="section">
        <div class="section-title">联系方式</div>
        <div class="info-list">
          <div class="info-item">
            <span class="label">联系电话</span>
            <span class="value">{{ details.contactInfo }}</span>
          </div>
          <div class="info-item">
            <span class="label">邮箱</span>
            <span class="value">{{ details.email }}</span>
          </div>
          <div class="info-item">
            <span class="label">{{ details.socialMediaPlatform }}</span>
            <span class="value">{{ details.socialMediaAccount }}</span>
          </div>
          <div class="info-item">
            <span class="label">现居地</span>
            <span class="value">{{ details.currentResidence }}</span>
          </div>
          <div class="info-item">
            <span class="label">家乡</span>
            <span class="value">{{ details.hometown }}</span>
          </div>
        </div>
      </div>

      <!-- 工作信息 -->
      <div class="section" v-if="details.workUnit || details.position">
        <div class="section-title">工作信息</div>
        <div class="info-list">
          <div class="info-item" v-if="details.workUnit">
            <span class="label">工作单位</span>
            <span class="value">{{ details.workUnit }}</span>
          </div>
          <div class="info-item" v-if="details.position">
            <span class="label">职位</span>
            <span class="value">{{ details.position }}</span>
          </div>
        </div>
      </div>

      <!-- 其他信息 -->
      <div class="section" v-if="hasOtherInfo">
        <div class="section-title">其他信息</div>
        <div class="info-list">
          <div class="info-item" v-if="details.interests">
            <span class="label">兴趣爱好</span>
            <span class="value">{{ details.interests }}</span>
          </div>
          <div class="info-item" v-if="details.advisorName">
            <span class="label">导师姓名</span>
            <span class="value">{{ details.advisorName }}</span>
          </div>
          <div class="info-item" v-if="details.honorsAchievements">
            <span class="label">获奖成就</span>
            <span class="value">{{ details.honorsAchievements }}</span>
          </div>
        </div>
      </div>

      <!-- 其他信息 section 后添加发送私信按钮 -->
      <div class="message-section" v-if="!isAudit">
        <el-button 
          type="primary" 
          icon="el-icon-message"
          @click="showMessageDialog = true"
          class="send-message-btn"
        >
          发送私信
        </el-button>
      </div>
    </div>

    <!-- 发送私信弹窗 -->
    <el-dialog
      title="发送私信"
      :visible.sync="showMessageDialog"
      width="90%"
      :close-on-click-modal="false"
      custom-class="message-dialog"
    >
      <el-form :model="messageForm" ref="messageForm" :rules="messageRules">
        <el-form-item prop="content">
          <el-input
            type="textarea"
            v-model="messageForm.content"
            :rows="4"
            placeholder="请输入私信内容"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showMessageDialog = false">取 消</el-button>
        <el-button 
          type="primary" 
          @click="handleSendMessage"
          :loading="sending"
        >发 送</el-button>
      </span>
    </el-dialog>

    <!-- 审批操作区域 -->
    <div v-if="isAudit" class="audit-actions">
      <div class="audit-form">
        <el-form :model="auditForm" ref="auditForm" :rules="auditRules" size="small">
          <el-form-item 
            prop="reasonForReview" 
            v-if="auditForm.examine === '2'"
          >
            <el-input
              type="textarea"
              v-model="auditForm.reasonForReview"
              placeholder="请输入不通过原因（必填）"
              :rows="3"
              resize="none"
              maxlength="200"
              show-word-limit
            ></el-input>
          </el-form-item>
          <div class="audit-buttons">
            <el-button 
              type="success" 
              plain
              icon="el-icon-check"
              @click="handleAudit('1')"
              :loading="auditing"
            >通过</el-button>
            <el-button 
              type="danger" 
              plain
              icon="el-icon-close"
              @click="handleAudit('2')"
              :loading="auditing"
            >不通过</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getAlumniDetail, checkAlumni, sendMessage } from "@/api/api";

export default {
  name: 'AlumniDetail',
  data() {
    return {
      details: {},
      isAudit: false,
      auditing: false,
      auditForm: {
        examine: '',
        reasonForReview: ''
      },
      auditRules: {
        reasonForReview: [
          { required: true, message: '请输入不通过原因', trigger: 'blur' }
        ]
      },
      showMessageDialog: false,
      sending: false,
      messageForm: {
        content: ''
      },
      messageRules: {
        content: [
          { required: true, message: '请输入私信内容', trigger: 'blur' },
          { min: 1, max: 500, message: '内容长度在 1 到 500 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    hasOtherInfo() {
      return this.details.interests || 
             this.details.advisorName || 
             this.details.honorsAchievements
    }
  },
  created() {
    this.isAudit = this.$route.query.isAudit == true;
    this.loadDetails()
  },
  methods: {
    async loadDetails() {
      try {
        const res = await getAlumniDetail({
          id: this.$route.query.id
        })
        if (res.code === 200) {
          this.details = res.data || {}
        }
      } catch (error) {
        console.error('获取校友详情失败:', error)
        this.$message.error('获取校友详情失败')
      }
    },
    async handleAudit(examine) {
      this.auditForm.examine = examine;
      
      if (examine === '2' && !this.auditForm.reasonForReview) {
        this.$refs.auditForm.validate(async (valid) => {
          if (!valid) return;
        });
        return;
      }
      
      try {
        this.auditing = true;
        const res = await checkAlumni({
          id: this.details.id,
          examine: examine,
          reasonForReview: this.auditForm.reasonForReview
        });
        
        if (res.code === 200) {
          this.$message.success('审批成功');
          // 返回上一页
          this.$router.go(-1);
        } else {
          this.$message.error(res.message || '审批失败');
        }
      } catch (error) {
        console.error('审批失败:', error);
        this.$message.error('审批失败，请稍后重试');
      } finally {
        this.auditing = false;
      }
    },
    async handleSendMessage() {
      try {
        // 表单验证
        await this.$refs.messageForm.validate();
        
        this.sending = true;
        const res = await sendMessage({
          recipientId: this.details.id,
          content: this.messageForm.content
        });
        
        if (res.code === 200) {
          this.$message.success('发送成功');
          this.showMessageDialog = false;
          this.messageForm.content = ''; // 清空输入
        } else {
          this.$message.error(res.message || '发送失败');
        }
      } catch (error) {
        if (error === false) {
          // 表单验证失败
          return;
        }
        console.error('发送私信失败:', error);
        this.$message.error('发送失败，请稍后重试');
      } finally {
        this.sending = false;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.alumni-detail {
  min-height: 100vh;
  background: #f5f7fa;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 100;

    .back {
      padding: 8px;
      margin-left: -8px;
      cursor: pointer;
      
      i {
        font-size: 20px;
        color: #333;
      }
    }

    span {
      flex: 1;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      margin-right: 28px;
    }
  }

  .content {
    margin-top: 44px;
    padding: 15px;
    padding-bottom: 80px; // 为底部按钮预留空间

    .section {
      background: #fff;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;

      .section-title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
        margin-bottom: 15px;
        padding-left: 10px;
        border-left: 3px solid #4790ff;
      }

      .info-list {
        .info-item {
          display: flex;
          padding: 10px 0;
          border-bottom: 1px solid #eee;
          
          &:last-child {
            border-bottom: none;
          }

          .label {
            width: 80px;
            color: #666;
            font-size: 14px;
          }

          .value {
            flex: 1;
            color: #333;
            font-size: 14px;
          }
        }
      }
    }

    .message-section {
      text-align: center;
      padding: 20px 0;
      
      .send-message-btn {
        width: 90%;
        max-width: 400px;
      }
    }
  }

  .message-dialog {
    /deep/ .el-dialog__body {
      padding: 20px;
    }

    @media screen and (max-width: 768px) {
      width: 90% !important;
      margin-top: 20vh !important;
    }
  }

  .audit-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 15px 20px;  // 适当增加内边距
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 2001;
    
    .audit-form {
      max-width: 500px;
      margin: 0 auto;
      
      .el-form-item {
        margin-bottom: 15px;
        
        /deep/ .el-textarea__inner {
          padding: 10px 15px;
          font-size: 14px;
          border-radius: 4px;
          background-color: #f8f9fb;
          border: 1px solid #e4e7ed;
          
          &:focus {
            background-color: #fff;
            border-color: #409EFF;
          }
          
          &::placeholder {
            color: #909399;
          }
        }
        
        /deep/ .el-textarea__count {
          color: #909399;
          font-size: 12px;
          background: transparent;
          padding: 0 5px;
        }
      }
      
      .audit-buttons {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 15px;
        
        .el-button {
          min-width: 100px;
          padding: 10px 20px;
          font-size: 14px;
          border-radius: 4px;
          
          &.el-button--success {
            &:hover, &:focus {
              color: #fff;
              background-color: #67c23a;
              border-color: #67c23a;
            }
          }
          
          &.el-button--danger {
            &:hover, &:focus {
              color: #fff;
              background-color: #f56c6c;
              border-color: #f56c6c;
            }
          }
          
          i {
            margin-right: 5px;
          }
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    &.has-audit {
      .content {
        padding-bottom: 100px;  // 移动端稍微减小底部间距
      }
    }
    
    .audit-actions {
      padding: 12px 15px;
      
      .audit-form {
        .audit-buttons {
          gap: 15px;
          
          .el-button {
            flex: 1;
            min-width: auto;
            padding: 8px 15px;
          }
        }
      }
    }
  }
}
</style>